<template>
    <view class="home-header">
        <han-icon name="list" class="icon-list" />

        <view class="header-list">
            <view
                class="list-item"
                v-for="item in homeList"
                :key="item.id"
                :class="{ active: item.id === activeId }"
                @click="handleTabClick(item.id)"
                >{{ item.title }}
            </view>
        </view>

        <han-icon name="search" size="38" class="icon-search" />
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { HOME_LIST } from '@/util/config/home.config';

const homeList = ref(HOME_LIST);

const activeId = ref(1);

// 处理点击标签实现高亮
const handleTabClick = (id) => {
    activeId.value = id;
};
</script>

<style lang="scss">
.home-header {
    display: flex;
    align-items: center;
    height: $han-nav-bar-height;
    border-bottom: 1rpx solid $han-global-border-color;

    .icon-list {
        margin: 0 20rpx;
    }

    .header-list {
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        width: 80%;
        overflow-x: auto;
        align-items: center;
        white-space: nowrap; // 防止文字换行
        -webkit-overflow-scrolling: touch; // iOS平滑滚动
        scroll-behavior: smooth; // 启用平滑滚动
        transition: all 0.3s ease; // 添加过渡效果

        .list-item {
            padding: 10rpx 10rpx 5rpx;
            margin: 0 10rpx;
            font-size: $han-font-size-base;
            color: $han-global-secondary-font-color;
        }

        .active {
            color: $han-global-primary-font-color;
            font-weight: bold;
            border-bottom: 4rpx solid $han-primary-color;
            margin-bottom: 10rpx;
            border-radius: 3rpx;
        }
    }

    .icon-search {
        margin-left: auto;
        margin-right: 20rpx;
    }
}
</style>
